<template>
  <div>
    <el-tabs tab-position="left" style="height: '1000px'" class="demo-tabs">
      <el-tab-pane label="什么是">
        <BaseMode />
      </el-tab-pane>
      <el-tab-pane label="管理 boolean 状态的 Hook">
        <UseBooleanvueMode />
      </el-tab-pane>
      <el-tab-pane label="格式化数据的 hook">
        <UseFormatResultMode />
      </el-tab-pane>
      <el-tab-pane label="防抖节流的 hook">
        <UseDebounceMode />
      </el-tab-pane>
      <el-tab-pane label="优雅的管理两个状态值间切换的 Hook">
        <UseToggleMode />
      </el-tab-pane>
      <el-tab-pane label="本地缓存的 Hook">
        <UseCacheMode />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
  import BaseMode from "./components/state/base.vue";
  import UseBooleanvueMode from "./components/state/UseBoolean.vue";
  import UseFormatResultMode from "./components/state/UseFormatResult.vue";
  import UseDebounceMode from "./components/state/UseDebounce.vue";
  import UseToggleMode from "./components/state/UseToggle.vue";
  import UseCacheMode from "./components/state/UseCache.vue";
</script>

<style lang="scss" scoped></style>
